<template>
  <div class="course">
    <h3>路线</h3>
    <div class="teamInner">
      <div class="fromInput">
        <p>
          <button>新增</button>
        </p>
        <p>
          <input type="text" v-model="searchValue" placeholder="请输入姓名" @keyup.enter="search" />
        </p>
      </div>

      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="ID" type="index" width="100"></el-table-column>
          <el-table-column label="头像" width="120">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.buildName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="120">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.address }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手机号" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属城市" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="自提点信息" width="200">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="团长配送费" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核人姓名" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="申请时间" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核时间" width="200">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="180">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                :active-value="1"
                inactive-color="#ff4949"
                @change="onChange($event, scope.row.id)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <ul class="operation">
                <li>户型</li>
                <li>相册</li>
                <li>动态</li>
                <li>沙盘</li>
                <li @click="handleEdit(scope.$index, scope.row)">编辑</li>
                <li @click="handleDelete(scope.$index, scope.row)">删除</li>
              </ul>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      value3: ""
    };
  }
};
</script>

<style scoped lang='scss'>
.course {
  width: 100%;
  height: 100%;
  .teamInner {
    width: 100%;
    .fromInput {
      display: flex;
      padding: 15px 0;
        justify-content: space-between;
      p {
        padding-right: 50px;
        button{
          width: 80px;
          height: 40px;
          background: cornflowerblue;
          border: none;
          border-radius: 10px;
          color: #ffffff;
        }
        input {
          width: 250px;
          height: 40px;
          text-indent: 10px;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
</style>
